<template>
	<view class="container">
		<template v-if="list.length>0">
			<view class="header">
				<view class="title">
					历史成绩
				</view>
				<view class="average">
					<view class="">
						平均成绩:
					</view>
					<view class="" style="margin-left: 6rpx;">
						{{average}}分
					</view>
				</view>
				<view class="box">
					<JnChart canvasId="line" :option="optionLine" lazyLoad @init="handleInit" />
				</view>
			</view>
			<view class="content">
				<view class="top">
					<view class="field field1">
						分数
					</view>
					<view class="field field2">
						用时
					</view>
					<view class="field field3" @tap="toggle">
						<view class="">
							时间
						</view>
						<view class="sort">
							<view class="arrUp" :style="{ 'border-bottom-color': color1 }"></view>
							<view class="arrDown" :style="{ 'border-top-color': color2 }"></view>
						</view>
					</view>
					<view class="field field4">
						成绩
					</view>
				</view>
				<scroll-view class="list" scroll-y="true">
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="line line1">
							{{item.score}}分
						</view>
						<view class="line line2">
							{{getTime(item.useTime)}}
						</view>
						<view class="line line3">
							{{getDate(item.endAt)}}
						</view>
						<view class="line line4 red" v-if="item.score<70">
							未及格
						</view>
						<view class="line line4 green" v-else>
							及格
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="btn" @tap="toQuestion2">
				继续考试
			</view>
		</template>
		<view class="" v-else>
			暂无记录
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	import {
		$http,
		toLogin,
		timestampToDateTime2
	} from "@/common"
	import JnChart from '@/components/jn-chart/index.vue'
	const list = ref([])
	const average = ref(0)
	onLoad(() => {
		$http.get("examLog").then(res => {
			if (res && res.length > 0) {
				list.value = res
				list.value.forEach(item => {
					item.time = timestampToDateTime2(item.endAt)
				})
				average.value = (list.value.map(item => item.score).reduce((acc, cur) => acc + cur, 0) /
					list.value.length).toFixed(1)
				getData()
			}
		})
	})
	onShow(() => {

	})
	onMounted(() => {
		console.log('fffffffff')
	})
	const optionLine = ref({})
	// 模拟从接口获取echarts渲染的数据
	function getData() {
		let names = Array.from({
			length: list.value.length
		}, (_, index) => index + 1)
		setTimeout(() => {
			const data = {
				names: names,
				values: list.value.map(m => m.score)
			}
			optionLine.value = getOption(data)
			//optionBar.value = getOptionBar(data)
		}, 800)
	}

	function getOption(datasource) {
		const {
			values,
			names
		} = datasource

		const option = {
			// 如果图表显示的很小，记得加上grid
			grid: {
				top: '5%',
				left: '5%',
				right: '5%',
				bottom: 0,
				containLabel: true
			},
			tooltip: {
				show: true,
				trigger: 'axis',
				confine: true,
				backgroundColor: '#1667EA',
				textStyle: {
					align: 'center', // 左对齐
					fontStyle: 'normal', // 正常字体样式
					fontWeight: 'normal', // 正常字体粗细
					fontFamily: 'serif', // 字体系列为衬线体
					fontSize: 14, // 字体大小为14px
					lineHeight: 20, // 行高为20px
					color: '#fff' // 文字颜色为深灰色
				},
				formatter: (params) => {
					console.log(params, 'params')
					const {
						value,
						name,
						dataIndex
					} = params[0]
					return `${list.value[dataIndex].time}\n${value}分`
				}
			},
			xAxis: {
				type: 'category',
				data: names
			},
			yAxis: {
				type: 'value',
				min: 0, // 设置最小值
				max: 100, // 设置最大值
				interval: 20
			},
			series: [{
				data: values,
				type: 'line',
				smooth: true,
				markLine: {
					data: [{
							yAxis: 70
						} // 自定义y=1000的线
					]
				}
			}]
		};

		return option
	}
	const color1 = ref("#808080")
	const color2 = ref("#D9D9D9")
	const isPositiveSequence = ref(true)

	function toggle() {
		isPositiveSequence.value = !isPositiveSequence.value
		temp()
		list.value = compare(list.value,'endAt',isPositiveSequence.value)
	}

	function compare(arr, key, type) {
		return arr.sort((value1, value2) => {
			const val1 = value1[key];
			const val2 = value2[key];
			// return val2-val1 降序排列,return val1-val2; 升序
			if (type) {
				return val1 - val2
			} else {
				return val2 - val1
			}
		});
	}

	function temp() {
		let temp = color1.value;
		color1.value = color2.value;
		color2.value = temp;
	}

	function getDate(val) {
		return timestampToDateTime2(val)
	}

	function getTime(val) {
		return formatTime(val)
	}

	function formatTime(seconds) {
		let timeArray = [Math.floor(seconds / 3600), Math.floor((seconds % 3600) / 60), seconds % 60];
		let formattedTime = timeArray.map(time => (time < 10 ? '0' + time : time));
		return formattedTime.join(':');
	}

	function toQuestion2() {
		uni.navigateTo({
			url: '/pages/home/question3'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background: linear-gradient(to bottom, #EFF9FE, #F9F9F9);
		padding: 30rpx 20rpx;

		.header {
			background-color: #fff;

			.title {
				font-weight: bold;
				font-size: 34rpx;
				padding: 30rpx 0 0 20rpx;
			}

			.average {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #E7F1FD;
				color: #1667EA;
				width: 230rpx;
				height: 60rpx;
				border-radius: 20rpx;
				margin: 20rpx 0 20rpx 20rpx;
			}

			.box {
				height: 300rpx;
			}
		}

		.content {
			background-color: #fff;
			padding: 20rpx 0;
			margin-top: 30rpx;

			.top {
				display: flex;
				height: 60rpx;
				line-height: 60rpx;

				.field {
					text-align: center;
				}

				.field1 {
					flex: 2;
				}

				.field2 {
					flex: 2;
				}

				.field3 {
					flex: 3;
					display: flex;
					justify-content: center;
					align-items: center;

					.sort {
						margin-left: 6rpx;
					}
				}

				.field4 {
					flex: 3;
				}
			}

			.list {
				max-height: 35vh;

				.item {
					display: flex;
					height: 60rpx;
					line-height: 60rpx;

					.line {
						text-align: center;
					}

					.line1 {
						flex: 2;
					}

					.line2 {
						flex: 2;
						color: #778899;
					}

					.line3 {
						flex: 3;
						color: #778899;
					}

					.line4 {
						flex: 3;
					}

					.red {
						color: #F02542;
					}

					.green {
						color: #07c160;
					}
				}
			}
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 500rpx;
			height: 70rpx;
			margin: 30rpx auto;
			font-size: 34rpx;
			border-radius: 20rpx;
			background-color: #1867E8;
			color: #fff;
		}

		.arrUp {
			width: 0;
			height: 0;
			border-right: 5px solid transparent;
			border-left: 5px solid transparent;
			border-bottom: 5px solid gray;
			cursor: pointer;
		}

		.arrDown {
			width: 0;
			height: 0;
			margin-top: 2px;
			border-right: 5px solid transparent;
			border-left: 5px solid transparent;
			border-top: 5px solid gray;
			cursor: pointer;
		}
	}
</style>